<!--
 * @Descripttion: 编辑分类
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-11-19 18:05:28
-->
<template>
  <div class="lb-add-classify">
    <top-nav :title="navTitle" :isBack="true" />
    <div class="form-search">
      <el-form
        @submit.native.prevent
        :model="ruleForm"
        ref="ruleForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="分类名" prop="title">
          <el-input
            v-model="ruleForm.title"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属分类" prop="pid">
          <el-select v-model="ruleForm.pid" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="封面图" prop="cover">
          <lb-cover
            :fileList="ruleForm.cover"
            @selectedFiles="getCover"
          ></lb-cover>
          <lb-tool-tips>{{ tips[1] }}</lb-tool-tips>
        </el-form-item>
        <el-form-item label="排序值" prop="top">
          <el-input-number
            class="lb-input-number"
            v-model="ruleForm.top"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitClassifyInfo">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="goBack">{{ $t('action.back') }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tips: { 1: `图片建议尺寸: 150 * 150` },
      // tips: {1: `图片建议尺寸: 150 * 150, 如果开启轮播图${this.$t('menu.Malls')}, 请务必上传此分类封面图`},
      id: '',
      navTitle: '',
      ruleForm: {
        title: '',
        pid: 0,
        cover: '',
        top: ''
      },
      rules: {
        title: { required: true, type: 'string', message: '请输入分类名', trigger: 'blur' },
        pid: { required: true, type: 'number', message: '请选择分类', trigger: 'blur' },
        cover: { required: true, type: 'array', message: '请上传图片', trigger: 'blur' },
        top: { required: true, type: 'number', message: '请输入排序值', trigger: 'blur' }
      },
      options: [
        {
          title: '顶级分类',
          id: 0
        }
      ]
    }
  },
  created () {
    this.getSelectOptions()
    let { id } = this.$route.query
    if (id) {
      this.id = id
      this.getOrModifyClassifyInfo(1)
    }
    this.navTitle = this.$t(id ? 'menu.EditClassify' : 'menu.AddClassify')
  },
  methods: {
    /**
       * @method 保存分类信息
       */
    submitClassifyInfo () {
      if (this.id) {
        this.getOrModifyClassifyInfo(2)
      } else {
        this.addClassify('ruleForm')
      }
    },
    /**
     * @method 获取分类下拉框的值
     */
    getSelectOptions () {
      this.$api.getSelectClassifyOptions().then(res => {
        console.log(res)
        if (res.code === 200) {
          this.options = this.options.concat(res.data)
        }
      })
    },
    /**
     * @method 获取封面图
     */
    getCover (img) {
      this.ruleForm.cover = img
    },
    /**
     * @method 获取分类的信息
     */
    getOrModifyClassifyInfo (type) {
      let { ruleForm, id } = this
      let obj = {}
      let flag = true
      if (type === 2) {
        this.$refs['ruleForm'].validate(valid => {
          if (!valid) flag = false
        })
        obj = { ...ruleForm, id }
        obj.cover = [obj.cover[0].url]
      } else {
        obj.id = id
      }
      if (flag) {
        this.$api.getOrModifyClassifyInfo(obj).then(res => {
          if (res.code === 200) {
            if (type === 2) {
              this.$message.success(this.$t('tips.successRev'))
              this.$router.push('/malls/classify')
            } else {
              let { data } = res
              this.ruleForm.cover = [{ url: data.cover }]
              this.ruleForm.title = data.title
              this.ruleForm.pid = data.pid
              this.ruleForm.top = data.top
            }
          }
        })
      }
    },

    /**
     * @method 添加分类操作
     */
    addClassify (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
          ruleForm.cover = ruleForm.cover.map(item => { return item.url })
          this.$api.addClassify(ruleForm).then(res => {
            if (res.code === 200) {
              this.$message.success('添加成功！')
              this.$router.push('/malls/classify')
            }
          })
        }
      })
    },

    /**
     * @method 返回上一页
     */
    goBack () {
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-add-classify {
  width: 100%;
  .form-search {
    padding: 20px;
    .el-form {
      width: 100%;
      .el-form-item {
        margin-bottom: 24px;
        .el-select,
        .el-input-number,
        .el-input {
          width: 300px;
        }
      }
      .last-form-item {
        margin-top: 30px;
      }
      .item-tips {
        margin-left: 120px;
        margin-bottom: 24px;
        color: #999999;
      }
    }
  }
}
</style>
